<template>
	<view class="content">
		<image :class="className" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>{{number + 1 }}</view>
		<view>{{ ok ? 'YES' : 'NO' }}</view>
				<view>{{ message.split('').reverse().join('') }}</view>
			
						<!-- 插值 -->
						<view class="text-area">
							<text>{{title}}</text>
						</view>
				
						<!-- v-if -->
						<view v-if="!rainning">今天天气真好</view>
						<view v-if="rainning">下雨天</view>
						<view v-if="state ==='vue'">state的值是Vue</view>
						<view> State is {{ state?'vue':'App'}}</view>
				
						<view>
							<view v-if="state==='vue'">uni-app</view>
							<view v-else-if="state ==='html'"> HTML</view>
							<view v-else>HTML</view>
						</view>
						<!-- v-for -->
						<view class="content">
				
							<view v-for="item in arr" style="color: #ff0000; margin-bottom: 5px;">
								{{ item }}
							</view>
				
				
							<view v-for="(item, index) in 4" style="color: #00ff00; margin-bottom: 5px;">
								<view :class="'list-' + index % 2">{{ index % 2 }}</view>
							</view>
				
				
							<view v-for="(value, name, index) in object" style="margin-bottom: 5px;">
								{{ index }}. {{ name }}: {{ value }}
							</view>
				
				
							<view v-for="item in arr" :key="item.id" style="color: #0000ff; margin-bottom: 5px;">
								{{ item.id }}: {{ item.name }}
							</view>
						</view>
						<view>
							<button @click="handleClick('参数1')">按钮1</button>
							<button @click="handleClick(dynamicParam)">按钮2</button>
							<button @click="handleClick('参数A','参数B',$event)">按钮3</button>
							<button @click="(e) =>handleClick('点击事件',e)">带事件对象</button>
						</view>
						
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dynamicParam:"我是动态参数",
				title:'Hi Grammar',
				className:"smalllogo",
				number:1,
				ok: true,
				message: 'Hello Vue!',
				arr: [{
										id: 1,
										name: 'uni-app'
									},
									{
										id: 2,
										name: 'HTML'
									}
								],
				
								object: {
									title: 'How to do lists in Vue',
									author: 'Jane Doe',
									publishedAt: '2020-04-10'
								},
								
			}
		},
		methods: {
			handleClick(param1,param2,event){
				console.log("参数1:",param1)
				console.log("参数2:",param2)
				console.log("事件对象:",event)
			},
			handleButton(msg,event){
				console.log("接收的消息:",msg)
				console.log("按钮文本:",event.target.textContent)
				console.log("事件对象:",event)
			}
		}
	}
</script>

<style>
	.content{
		text-align: center;
	}

.smalllogo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
	display: block;
}
.text-area {
		color: #bebebe;
	}

</style>
